<template>
  <div class="mainlaa">
    <el-container class="container">
      <el-header class="header">
        <commpot-header ref="header" />
      </el-header>
      <el-container class="rigth">
        <el-aside width="auto" class="box">
          <commpot-asides @EventClick="EventClick" />
        </el-aside>
        <el-main class="main">
          <div class="tags" v-if="showTags">
            <tags @EventClick="EventClick" @EventClick2="EventClick2" />
          </div>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import commpotHeader from "../../components/commpotHeader.vue";
import commpotAsides from "../../components/commpotAsides.vue";
import tags from '../../components/commpotTags.vue';
export default {
  components: {
    commpotHeader,
    commpotAsides,
    tags
  },
  computed: {
    // 计算属性来判断是否显示 tags 组件
    showTags () {
      const excludeRoutes = ['/home', '/home2'];
      return !excludeRoutes.includes(this.$route.path);
    }
  },
  methods: {
    EventClick (item) {
      this.$refs.header.coltCss(item)
    },
    EventClick2 (item) {
      this.$refs.header.coltCss(item)
    }
  }
}
</script>

<style lang="less">
.mainlaa {
  height: 100vh;
}
.container {
  height: 100%;
  .header {
    padding: 0;
  }
  .rigth {
    padding: 0;
  }
  .main {
    background: pink;
    padding: 0;
    padding-left: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }
}
.el-header {
  padding: 0;
}
.el-card__body,
.el-main {
  padding: 10px;
}
.tags {
  height: 50px;
  width: 100%;
  background: #fff;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
</style>